<template>
  <van-field
    :model-value="modelValue"
    is-link
    readonly
    :label="label"
    :placeholder="`请选择${label}`"
    @click="showPicker = true"
  />
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
  </van-popup>
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: String,
    default: () => {
      return ''
    }
  },
  label: {
    type: String,
    default: () => {
      return ''
    }
  },
  options: {
    type: Array as () => any[],
    default: () => {
      return []
    }
  },
  required: {
    type: Boolean,
    default: () => {
      return false
    }
  }
})
const columns = computed(() => {
  return props.options.map((el) => {
    return {
      text: el,
      value: el
    }
  })
})
const showPicker = ref<boolean>(false)
const onConfirm = () => {}
</script>

<style scoped></style>
